{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends '@admin/default_frame.twig' %}

{% set menus = ['content', 'layout'] %}

{% block title %}{{'admin.content.layout_management'|trans}}{% endblock %}
{% block sub_title %}{{'admin.content.contents_management'|trans}}{% endblock %}

{% form_theme form '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}

{% block javascript %}
    <script>
        var sections = {
            {{ constant('Eccube\\Entity\\Layout::TARGET_ID_UNUSED') }} : '{{ 'admin.content.layout_section__unused'|trans }}',
            {{ constant('Eccube\\Entity\\Layout::TARGET_ID_HEAD') }} : '{{ 'admin.content.layout_section__head'|trans }}',
            {{ constant('Eccube\\Entity\\Layout::TARGET_ID_BODY_AFTER') }} : '{{ 'admin.content.layout_section__body_after'|trans }}',
            {{ constant('Eccube\\Entity\\Layout::TARGET_ID_HEADER') }} : '{{ 'admin.content.layout_section__header'|trans }}',
            {{ constant('Eccube\\Entity\\Layout::TARGET_ID_CONTENTS_TOP') }} : '{{ 'admin.content.layout_section__contents_top'|trans }}',
            {{ constant('Eccube\\Entity\\Layout::TARGET_ID_SIDE_LEFT') }} : '{{ 'admin.content.layout_section__side_left'|trans }}',
            {{ constant('Eccube\\Entity\\Layout::TARGET_ID_MAIN_TOP') }} : '{{ 'admin.content.layout_section__main_top'|trans }}',
            {{ constant('Eccube\\Entity\\Layout::TARGET_ID_MAIN_BOTTOM') }} : '{{ 'admin.content.layout_section__main_bottom'|trans }}',
            {{ constant('Eccube\\Entity\\Layout::TARGET_ID_SIDE_RIGHT') }} : '{{ 'admin.content.layout_section__side_right'|trans }}',
            {{ constant('Eccube\\Entity\\Layout::TARGET_ID_CONTENTS_BOTTOM') }} : '{{ 'admin.content.layout_section__contents_bottom'|trans }}',
            {{ constant('Eccube\\Entity\\Layout::TARGET_ID_FOOTER') }} : '{{ 'admin.content.layout_section__footer'|trans }}',
            {{ constant('Eccube\\Entity\\Layout::TARGET_ID_DRAWER') }} : '{{ 'admin.content.layout_section__drawer'|trans }}',
            {{ constant('Eccube\\Entity\\Layout::TARGET_ID_CLOSE_BODY_BEFORE') }} : '{{ 'admin.content.layout_section__close_body_before'|trans }}'
        };

        // use for layout_design.js
        var els = Object.keys(sections).map(function(id) {
            return '#position_' + id;
        });
    </script>
    <script src="{{ asset('assets/js/vendor/jquery.ui/jquery.ui.core.min.js', 'admin') }}"></script>
    <script src="{{ asset('assets/js/vendor/jquery.ui/jquery.ui.widget.min.js', 'admin') }}"></script>
    <script src="{{ asset('assets/js/vendor/jquery.ui/jquery.ui.mouse.min.js', 'admin') }}"></script>
    <script src="{{ asset('assets/js/vendor/jquery.ui/jquery.ui.sortable.min.js', 'admin') }}"></script>
    <script src="{{ asset('assets/js/layout_design.js', 'admin') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.8/ext-language_tools.js"></script>

    <script>
        $(function(){
            $('.block-context-menu').popover({
                placement: 'bottom',
                html: true,
                container: 'body',
                content: function () {
                    return $('#context-menu').html();
                }
            }).on('shown.bs.popover', function () {
                $('.block-context-menu').not(this).popover('hide');
                var $menu = $(this);
                var $block = $menu.closest('[id^="detail_box__layout_item"]');
                var block = {
                    'menu': $menu,
                    'current': $block,
                    'prev': $block.prev('[id^="detail_box__layout_item"]'),
                    'next': $block.next('[id^="detail_box__layout_item"]')
                };
                $('.context-moveup').on('click', block, function() {
                    if (block.prev.length) {
                        block.current.insertBefore(block.prev);
                        block.menu.popover('hide');
                        window.updateUpDown($block.parent('.ui-sortable').first());
                    }
                });
                $('.context-movedown').on('click', block, function() {
                    if (block.next.length) {
                        block.current.insertAfter(block.next);
                        block.menu.popover('hide');
                        window.updateUpDown($block.parent('.ui-sortable').first());
                    }
                });
                $('.context-movesection').on('click', block, function() {
                    $('#clickStreamConfirm').modal();
                    $('#target-block').val($(block.current).attr('id'));
                    block.menu.popover('hide');
                });
                $('#clickStreamConfirm').on('show.bs.modal', function(event) {
                    $('#move-section').children('option').remove();
                    for (var target_id in sections) {
                        $('#move-section').append('<option value="' + target_id + '">' + sections[target_id] + '</option>');
                    }
                });
                $('#move-to-section').on('click', function() {
                    var $position = $('#position_' + $('#move-section').val());
                    var $target = $('#' + $('#target-block').val());
                    var $parent = $target.parent();

                    $position.append($target);
                    window.updateUpDown($position);
                    window.updateUpDown($parent);

                    if ($position.children('.block').length > 0) {
                        // hide placeholder
                        $position.children('.target-placeholder').remove();
                    }
                    if ($parent.children('.block').length <= 0) {
                        // show placeholder
                        $parent.append($('#target-placeholder').html());
                    }
                });

                $('.context-preview').on('click', block, function() {
                    $('#codePreview').modal();
                    block.menu.popover('hide');
                });

                $('#codePreview').on('show.bs.modal', block, function(event) {
                    var attr_id = block.current.attr('id').match(/^detail_box__layout_item--([0-9]+)/);
                    var block_id = attr_id[1];
                    var $modal = $(this);
                    var $block_edit = $modal.find('#block-edit');
                    var onclick = $block_edit.attr('onclick').replace(/{{ constant('Eccube\\Controller\\Admin\\Content\\LayoutController::DUMMY_BLOCK_ID') }}/, block_id);
                    $block_edit.attr('onclick', onclick);

                    ace.require("ace/ext/language_tools");
                    var editor = ace.edit("block-source-code");
                    editor.session.setMode("ace/mode/twig");
                    editor.setTheme("ace/theme/tomorrow");
                    editor.setOptions({
                        readOnly: true,
                        autoScrollEditorIntoView: true,
                        minLines: 20,
                        maxLines: 20
                    });

                    $.ajax({
                        url: '{{ url('admin_content_layout_view_block') }}',
                        type: 'GET',
                        data: {
                            id: block_id
                        }
                    }).done(function(json, statusText, jqXHR) {
                        editor.setValue(json.source);
                        editor.gotoLine(1);
                        editor.scrollToLine(1);
                    }).fail(function(jqXHR, statusText, errorThrown) {
                        editor.setValue(statusText + ' ' + errorThrown);
                    });
                });
            });
        });
    </script>
    <script>
        // プレビューボタンクリック時
        {% if Layout.id -%}
        $('#preview-button').on('click', function(){
            var page_id = $('#{{ form.Page.vars.id }}').val();
            if (!page_id) {
                alert("{{ 'admin.content.layout_preview_select_page'|trans }}");
                return false;
            }

            $('#form1').attr('action', "{{ url('admin_content_layout_preview', {id: Layout.id}) }}");
            $('#form1').attr('target', '_blank');
            $('#form1').submit();

            // submit後に元に戻す
            $('#form1').attr('action', "{{ url('admin_content_layout_edit', {id: Layout.id}) }}");
            $('#form1').attr('target', '_self');

            return false;
        });
        {% endif %}

        // searchWordの実行
        $('#search-block').on('input', function () {
            searchWord($(this).val(), $('#unused-block .sort'));
        });
    </script>
{% endblock javascript %}

{% block main %}
    {% set loop_index = 0 %}
    <form name="form1" id="form1" method="post" action="{% if Layout.id -%}
                {{ url('admin_content_layout_edit', {id: Layout.id}) }}
    {%- else -%}
                {{ url('admin_content_layout_new') }}
    {%- endif %}">
        {{ form_widget(form._token) }}
        <div class="c-contentsArea__cols">
            <div class="c-contentsArea__primaryCol">
                <div class="c-primaryCol">
                    <div class="card rounded border-0 mb-4">
                        <div class="card-header">
                            <div class="row">
                                <div class="col-8"><span class="card-title">{{ 'admin.content.layout__card_title'|trans }}</span></div>
                                <div class="col-4 text-right"><a data-toggle="collapse" href="#layoutOverview" aria-expanded="false" aria-controls="layoutOverview"><i class="fa fa-angle-up fa-lg"></i></a></div>
                            </div>
                        </div>
                        <div class="collapse show ec-cardCollapse" id="layoutOverview">
                            <div class="card-body">
                                <div class="row mb-2">
                                    <div class="col-3 pr-0"><span>{{ 'admin.content.layout_name'|trans }}</span><span class="badge badge-primary ml-1">{{ 'admin.common.required'|trans }}</span></div>
                                    <div class="col">
                                        {{ form_widget(form.name) }}
                                        {{ form_errors(form.name) }}
                                    </div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-3 pr-0"><span>{{ 'admin.common.device_type'|trans }}</span></div>
                                    <div class="col">
                                        <span>
                                            {% if Layout.id %}
                                                {{ form.DeviceType.vars.data.name }}
                                                <input type="hidden" name="{{ form.DeviceType.vars.full_name }}" value="{{ form.DeviceType.vars.value }}" />
                                            {% else %}
                                                {{ form_widget(form.DeviceType) }}
                                            {% endif %}
                                            {{ form_errors(form.DeviceType) }}
                                        </span>
                                    </div>
                                </div>
                                {# エンティティ拡張の自動出力 #}
                                {% for f in form if f.vars.eccube_form_options.auto_render %}
                                    {% if f.vars.eccube_form_options.form_theme %}
                                        {% form_theme f f.vars.eccube_form_options.form_theme %}
                                        {{ form_row(f) }}
                                    {% else %}
                                        <div class="row mb-2">
                                            <div class="col-3 pr-0"><span>{{ f.vars.label|trans }}</span></div>
                                            <div class="col">
                                                {{ form_widget(f) }}
                                                {{ form_errors(f) }}
                                            </div>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    <div class="card rounded border-0 mb-4">
                        <div class="card-header">
                            <div class="row">
                                <div class="col-8">
                                    <div class="d-inline-block" data-tooltip="true" data-placement="top" title="{{ 'tooltip.content.layout_edit'|trans }}"><span class="card-title">{{ 'admin.content.layout_edit__card_title'|trans }}</span><i class="fa fa-question-circle fa-lg ml-1"></i></div>
                                </div>
                                <div class="col-4 text-right"><a data-toggle="collapse" href="#layoutBlockEdit" aria-expanded="false" aria-controls="layoutBlockEdit"><i class="fa fa-angle-up fa-lg"></i></a></div>
                            </div>
                        </div>
                        <div class="collapse show ec-cardCollapse" id="layoutBlockEdit">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col p-2">
                                        <div class="d-block border border-ec-gray">
                                            {% set target_id = constant('Eccube\\Entity\\Layout::TARGET_ID_HEAD') %}
                                            <div id="position_{{ target_id }}"
                                                 class="d-block p-3 border border-ec-gray border-top-0 border-right-0 border-left-0 ui-sortable">
                                                <p class="font-weight-bold mb-2">{{ 'admin.content.layout_section__head'|trans }}</p>
                                                {% for BlockPosition in Layout.getBlockPositionsByTargetId(target_id) %}
                                                    {{ include('@admin/Content/layout_block.twig') }}
                                                    {% set loop_index = loop_index + 1 %}
                                                {% else %}
                                                    <div class="target-placeholder d-block text-center border-ec-dashed p-3"><span class="text-ec-gray">{{ 'admin.content.layout_drag_and_drop_message'|trans }}</span></div>
                                                {% endfor %}
                                            </div>
                                            {% set target_id = constant('Eccube\\Entity\\Layout::TARGET_ID_BODY_AFTER') %}
                                            <div id="position_{{ target_id }}"
                                                 class="d-block p-3 border border-ec-gray border-top-0 border-right-0 border-left-0 ui-sortable">
                                                <p class="font-weight-bold mb-2">{{ 'admin.content.layout_section__body_after'|trans }}</p>
                                                {% for BlockPosition in Layout.getBlockPositionsByTargetId(target_id) %}
                                                    {{ include('@admin/Content/layout_block.twig') }}
                                                    {% set loop_index = loop_index + 1 %}
                                                {% else %}
                                                    <div class="target-placeholder d-block text-center border-ec-dashed p-3"><span class="text-ec-gray">{{ 'admin.content.layout_drag_and_drop_message'|trans }}</span></div>
                                                {% endfor %}
                                            </div>
                                            {% set target_id = constant('Eccube\\Entity\\Layout::TARGET_ID_HEADER') %}
                                            <div id="position_{{ target_id }}"
                                                 class="d-block p-3 border border-ec-gray border-top-0 border-right-0 border-left-0 ui-sortable">
                                                <p class="font-weight-bold mb-2">{{ 'admin.content.layout_section__header'|trans }}</p>
                                                {% for BlockPosition in Layout.getBlockPositionsByTargetId(target_id) %}
                                                    {{ include('@admin/Content/layout_block.twig') }}
                                                    {% set loop_index = loop_index + 1 %}
                                                {% else %}
                                                    <div class="target-placeholder d-block text-center border-ec-dashed p-3"><span class="text-ec-gray">{{ 'admin.content.layout_drag_and_drop_message'|trans }}</span></div>
                                                {% endfor %}
                                            </div>
                                            {% set target_id = constant('Eccube\\Entity\\Layout::TARGET_ID_CONTENTS_TOP') %}
                                            <div id="position_{{ target_id }}"
                                                 class="d-block p-3 border border-ec-gray border-top-0 border-right-0 border-left-0 ui-sortable">
                                                <p class="font-weight-bold mb-2">{{ 'admin.content.layout_section__contents_top'|trans }}</p>
                                                {% for BlockPosition in Layout.getBlockPositionsByTargetId(target_id) %}
                                                    {{ include('@admin/Content/layout_block.twig') }}
                                                    {% set loop_index = loop_index + 1 %}
                                                {% else %}
                                                    <div class="target-placeholder d-block text-center border-ec-dashed p-3"><span class="text-ec-gray">{{ 'admin.content.layout_drag_and_drop_message'|trans }}</span></div>
                                                {% endfor %}
                                            </div>
                                            <div class="d-block pl-3 pr-3">
                                                <div class="row">
                                                    <div class="col align-items-start pr-0 p-3 border border-ec-gray border-top-0">
                                                        {% set target_id = constant('Eccube\\Entity\\Layout::TARGET_ID_SIDE_LEFT') %}
                                                        <div id="position_{{ target_id }}"
                                                             class="d-block ui-sortable">
                                                            <p class="font-weight-bold mb-2">{{ 'admin.content.layout_section__side_left'|trans }}</p>
                                                            {% for BlockPosition in Layout.getBlockPositionsByTargetId(target_id) %}
                                                                {{ include('@admin/Content/layout_block.twig') }}
                                                                {% set loop_index = loop_index + 1 %}
                                                            {% else %}
                                                                <div class="target-placeholder d-block text-center border-ec-dashed p-3"><span class="text-ec-gray">{{ 'admin.content.layout_drag_and_drop_message'|trans }}</span></div>
                                                            {% endfor %}
                                                        </div>
                                                    </div>
                                                    <div class="col align-items-start pl-0 pr-0 border border-ec-gray border-top-0 border-left-0 border-bottom-0">
                                                        <div class="d-block h-100">
                                                            {% set target_id = constant('Eccube\\Entity\\Layout::TARGET_ID_MAIN_TOP') %}
                                                            <div id="position_{{ target_id }}"
                                                                 class="d-block p-3 border border-ec-gray border-top-0 border-left-0 border-right-0 ui-sortable">
                                                                <p class="font-weight-bold mb-2">{{ 'admin.content.layout_section__main_top'|trans }}</p>
                                                                {% for BlockPosition in Layout.getBlockPositionsByTargetId(target_id) %}
                                                                    {{ include('@admin/Content/layout_block.twig') }}
                                                                    {% set loop_index = loop_index + 1 %}
                                                                {% else %}
                                                                    <div class="target-placeholder d-block text-center border-ec-dashed p-3"><span class="text-ec-gray">{{ 'admin.content.layout_drag_and_drop_message'|trans }}</span></div>
                                                                {% endfor %}
                                                            </div>
                                                            <div class="d-block p-3 border border-ec-gray border-top-0 border-left-0 border-right-0 bg-ec-lightGray">
                                                                <div class="d-block text-center p-3">
                                                                    <p class="font-weight-bold mb-2">{{ 'admin.content.layout_section__main'|trans }}</p>
                                                                </div>
                                                            </div>
                                                            {% set target_id = constant('Eccube\\Entity\\Layout::TARGET_ID_MAIN_BOTTOM') %}
                                                            <div id="position_{{ target_id }}"
                                                                 class="d-block p-3 border border-ec-gray border-top-0 border-left-0 border-right-0 ui-sortable">
                                                                <p class="font-weight-bold mb-2">{{ 'admin.content.layout_section__main_bottom'|trans }}</p>
                                                                {% for BlockPosition in Layout.getBlockPositionsByTargetId(target_id) %}
                                                                    {{ include('@admin/Content/layout_block.twig') }}
                                                                    {% set loop_index = loop_index + 1 %}
                                                                {% else %}
                                                                    <div class="target-placeholder d-block text-center border-ec-dashed p-3"><span class="text-ec-gray">{{ 'admin.content.layout_drag_and_drop_message'|trans }}</span></div>
                                                                {% endfor %}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col align-items-start pl-0 border border-ec-gray border-top-0 border-left-0">
                                                        {% set target_id = constant('Eccube\\Entity\\Layout::TARGET_ID_SIDE_RIGHT') %}
                                                        <div id="position_{{ target_id }}"
                                                             class="d-block p-3 h-100 ui-sortable">
                                                            <p class="font-weight-bold mb-2">{{ 'admin.content.layout_section__side_right'|trans }}</p>
                                                            {% for BlockPosition in Layout.getBlockPositionsByTargetId(target_id) %}
                                                                {{ include('@admin/Content/layout_block.twig') }}
                                                                {% set loop_index = loop_index + 1 %}
                                                            {% else %}
                                                                <div class="target-placeholder d-block text-center border-ec-dashed p-3"><span class="text-ec-gray">{{ 'admin.content.layout_drag_and_drop_message'|trans }}</span></div>
                                                            {% endfor %}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="d-block border border-ec-gray border-top-0 border-right-0 border-left-0">
                                                {% set target_id = constant('Eccube\\Entity\\Layout::TARGET_ID_CONTENTS_BOTTOM') %}
                                                <div id="position_{{ target_id }}"
                                                     class="d-block p-3 ui-sortable">
                                                    <p class="font-weight-bold mb-2">{{ 'admin.content.layout_section__contents_bottom'|trans }}</p>
                                                    {% for BlockPosition in Layout.getBlockPositionsByTargetId(target_id) %}
                                                        {{ include('@admin/Content/layout_block.twig') }}
                                                        {% set loop_index = loop_index + 1 %}
                                                    {% else %}
                                                        <div class="target-placeholder d-block text-center border-ec-dashed p-3"><span class="text-ec-gray">{{ 'admin.content.layout_drag_and_drop_message'|trans }}</span></div>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                            <div class="d-block border border-ec-gray border-top-0 border-right-0 border-left-0">
                                                {% set target_id = constant('Eccube\\Entity\\Layout::TARGET_ID_FOOTER') %}
                                                <div id="position_{{ target_id }}"
                                                     class="d-block p-3 ui-sortable">
                                                    <p class="font-weight-bold mb-2">{{ 'admin.content.layout_section__footer'|trans }}</p>
                                                    {% for BlockPosition in Layout.getBlockPositionsByTargetId(target_id) %}
                                                        {{ include('@admin/Content/layout_block.twig') }}
                                                        {% set loop_index = loop_index + 1 %}
                                                    {% else %}
                                                        <div class="target-placeholder d-block text-center border-ec-dashed p-3"><span class="text-ec-gray">{{ 'admin.content.layout_drag_and_drop_message'|trans }}</span></div>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                            <div class="d-block border border-ec-gray border-top-0 border-right-0 border-left-0">
                                                {% set target_id = constant('Eccube\\Entity\\Layout::TARGET_ID_DRAWER') %}
                                                <div id="position_{{ target_id }}"
                                                     class="d-block p-3 ui-sortable">
                                                    <p class="font-weight-bold mb-2">{{ 'admin.content.layout_section__drawer'|trans }}</p>
                                                    {% for BlockPosition in Layout.getBlockPositionsByTargetId(target_id) %}
                                                        {{ include('@admin/Content/layout_block.twig') }}
                                                        {% set loop_index = loop_index + 1 %}
                                                    {% else %}
                                                        <div class="target-placeholder d-block text-center border-ec-dashed p-3"><span class="text-ec-gray">{{ 'admin.content.layout_drag_and_drop_message'|trans }}</span></div>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                            <div class="d-block">
                                                {% set target_id = constant('Eccube\\Entity\\Layout::TARGET_ID_CLOSE_BODY_BEFORE') %}
                                                <div id="position_{{ target_id }}"
                                                     class="d-block p-3 border-top-0 border-right-0 border-left-0 ui-sortable">
                                                    <p class="font-weight-bold mb-2">{{ 'admin.content.layout_section__close_body_before'|trans }}</p>
                                                    {% for BlockPosition in Layout.getBlockPositionsByTargetId(target_id) %}
                                                        {{ include('@admin/Content/layout_block.twig') }}
                                                        {% set loop_index = loop_index + 1 %}
                                                    {% else %}
                                                        <div class="target-placeholder d-block text-center border-ec-dashed p-3"><span class="text-ec-gray">{{ 'admin.content.layout_drag_and_drop_message'|trans }}</span></div>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-3 p-2">
                                        {% if Layout.id and form.Page.vars.choices|length > 0 -%}
                                        <div id="preview-block" class="d-block border border-ec-gray mb-4">
                                            <div class="card-body">
                                                <div class="d-block text-center mb-3">
                                                    {{ form_widget(form.Page) }}
                                                </div>
                                                <div class="d-block text-center">
                                                    <a id="preview-button" class="btn btn-block btn-ec-regular">{{ 'admin.content.layout_preview'|trans }}</a>
                                                </div>
                                            </div>
                                        </div>
                                        {% endif %}
                                        <div id="unused-block" class="d-block border border-ec-gray">
                                            {% set unused_target_id = constant('Eccube\\Entity\\Layout::TARGET_ID_UNUSED') %}
                                            <div id="position_{{ unused_target_id }}" class="d-block p-3 ui-sortable">
                                                <p class="font-weight-bold mb-2">{{ 'admin.content.layout_section__unused'|trans }}</p>
                                                <div class="mb-3">
                                                    <div class="form-row">
                                                        <div class="col">
                                                            <div class="input-group mb-3">
                                                                <div class="input-group-prepend">
                                                                    <span class="input-group-text" id="basic-addon1"><i class="fa fa-search"></i></span>
                                                                </div>
                                                                <input id="search-block" class="form-control" type="search" aria-label="Search">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {% for UnusedBlock in UnusedBlocks %}
                                                    <div id="detail_box__layout_item--{{ UnusedBlock.id }}"
                                                         class="block sort{% if loop.first %} first{% endif %} border border-ec-gray bg-ec-lightGray p-2 mb-2">
                                                        <div class="row justify-content-between">
                                                            <div class="col">
                                                                <i class="fa fa-bars text-ec-gray mr-3"></i>
                                                                <span class="view_readme" data-toggle="modal"
                                                                   data-target="#blockModal"
                                                                   data-id="{{ UnusedBlock.id }}"
                                                                   data-name="{{ UnusedBlock.name }}"
                                                                   title="{{ UnusedBlock.name }}"
                                                                >{{ UnusedBlock.name }}</span>
                                                            </div>
                                                            <div class="col-auto text-right">
                                                                <div class="d-inline-block px-3">
                                                                    <input type="hidden" class="name" name="name_{{ loop_index }}"
                                                                        value="{{ UnusedBlock.name }}"/>
                                                                    <input type="hidden" class="id" name="block_id_{{ loop_index }}"
                                                                        value="{{ UnusedBlock.id }}"/>
                                                                    <input type="hidden" class="target-id"
                                                                        name="section_{{ loop_index }}"
                                                                        value="{{ unused_target_id }}"/>
                                                                    <input type="hidden" class="block-row"
                                                                        name="block_row_{{ loop_index }}"
                                                                        value="{{ UnusedBlock.id }}"/>
                                                                    <div class="block-context-menu d-inline-block px-3"><i class="fa fa-ellipsis-v fa-lg text-secondary"></i></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    {% set loop_index = loop_index + 1 %}
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal fade" id="clickStreamConfirm" tabindex="-1" role="dialog" aria-labelledby="clickStreamConfirm" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">{{ 'admin.content.layout_move_to__confirm_title'|trans }}</h5>
                                                <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                            </div>
                                            <div class="modal-body">
                                                <p>{{ 'admin.content.layout_move_to__confirm_message'|trans }}</p>
                                                <div>
                                                    <select id="move-section" class="form-control">
                                                    </select>
                                                    <input type="hidden" id="target-block" />
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button class="btn btn-ec-regular w-25" type="button" data-dismiss="modal">{{ 'admin.common.cancel'|trans }}</button>
                                                <button id="move-to-section" class="btn btn-ec-conversion w-25" type="button" data-dismiss="modal">{{ 'admin.content.layout_move_to__execute'|trans }}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal fade" id="codePreview" tabindex="-1" role="dialog" aria-labelledby="codePreview" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">{{ 'admin.content.layout_preview_code__confirm_title'|trans }}</h5>
                                                <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                            </div>
                                            <div class="modal-body">
                                                <p>{{ 'admin.content.layout_preview_code__confirm_message'|trans }}</p>
                                                <div id="block-source-code" class="d-block border bg-ec-lightGray p-2"></div>
                                            </div>
                                            <div class="modal-footer">
                                                <button class="btn btn-ec-regular" type="button" data-dismiss="modal">{{ 'admin.common.cancel'|trans }}</button>
                                                <button id="block-edit" onclick="location.href='{{ url('admin_content_block_edit', {id: constant('Eccube\\Controller\\Admin\\Content\\LayoutController::DUMMY_BLOCK_ID')}) }}'" class="btn btn-ec-conversion w-25" type="button" data-dismiss="modal">{{ 'admin.content.layout_preview_code__confirm_move_to_block'|trans }}</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="context-menu" style="display: none">
                                    <div class='list-group'>
                                        <a href='javascript:;' class='context-moveup list-group-item list-group-item-action border-0'>
                                            <i class='fa fa-long-arrow-up mr-1'></i>{{ 'admin.content.layout_up'|trans }}
                                        </a>
                                        <a href='javascript:;' class='context-movedown list-group-item list-group-item-action border-0'>
                                            <i class='fa fa-long-arrow-down mr-1'></i>{{ 'admin.content.layout_down'|trans }}
                                        </a>
                                        <a href='javascript:;' class='context-movesection list-group-item list-group-item-action border-0'>
                                            <i class='fa fa-arrows mr-1'></i>{{ 'admin.content.layout_move_to'|trans }}
                                        </a>
                                        <a href='javascript:;' class='context-preview list-group-item list-group-item-action border-0'>
                                            <i class='fa fa-code mr-1'></i>{{ 'admin.content.layout_preview_code'|trans }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="target-placeholder" style="display: none"><div class="target-placeholder d-block text-center border-ec-dashed p-3"><span class="text-ec-gray">{{ 'admin.content.layout_drag_and_drop_message'|trans }}</span></div></div>
            <div class="c-conversionArea">
                <div class="c-conversionArea__container">
                    <div class="row justify-content-between align-items-center">
                        <div class="col-6">
                            <div class="c-conversionArea__leftBlockItem">
                                <a class="c-baseLink" href="{{ url('admin_content_layout') }}"><i class="fa fa-backward" aria-hidden="true"></i><span>{{ 'admin.content.layout_management'|trans }}</span></a>
                            </div>
                        </div>
                        <div class="col-6">
                            <div id="ex-conversion-action" class="row align-items-center justify-content-end">
                                <div class="col-auto">
                                    <button class="btn btn-ec-conversion px-5" type="submit">{{ 'admin.common.registration'|trans }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
{% endblock %}
